<template>
  <div id="goods-info" class="goods-info">
    <div class="pro-name bottom-border" :title="goodsInfo.goods_name">
      <h1>{{ goodsInfo.goods_name }}</h1>
    </div>
    <div class="pro-details">
      <goods-exchange :promotions="promotions"/>
      <goods-groupbuy-seckill :promotions="promotions" :selectedSku="selectedSku"/>
      <div class="price-box">
        <div v-if="originPriceShow" class="pro-list">
          <div class="pro-title">价格</div>
          <!--如果有大于1个的sku，则显示价格区间-->
          <div v-if="priceRange" class="pro-content price">
            <strong>{{ priceRange[0] | unitPrice('¥') }}</strong>
            <template v-if="priceRange[1]"> ~ <strong>{{ priceRange[1] | unitPrice('¥') }}</strong></template>
          </div>
          <div v-else class="pro-content price">
            <div v-if="snapshot">
               <span>￥</span>
               <strong>{{ orderprice | unitPrice }}</strong>
            </div>
            <div v-else>
              <span>￥</span>
              <strong>{{ goodsInfo.price | unitPrice }}</strong>
            </div>
          </div>
        </div>
        <goods-promotions :promotions="promotions" :selectedSku="selectedSku"/>
      </div>
      <goods-coupons :goods="goodsInfo" :selectedSku="selectedSku" :is-snapshot="snapshot"/>
      <goods-ship :goods-id="goods.goods_id" @in-stock-change="handleInStockChange"/>
    </div>
    <div v-if="specList && specList.length" :class="['pro-spec', unselectedSku && 'error']">
      <div v-for="(spec, specIndex) in specList" :key="spec.spec_id" class="pro-list">
        <div class="pro-title pro-title1">{{ spec.spec_name }}</div>
        <div class="pro-content">
          <button
            v-if="snapshot"
            :class="['spec-val-btn', 'selected', spec.spec_image && 'spec-image']"
            type="button"
          >
            <img v-if="spec.spec_image" :src="spec.spec_image">
            <span class="spec-text">{{ spec.spec_value }}</span>
            <i class="iconfont ea-icon-right-bottom-checked"></i>
          </button>
          <template v-else>
            <button
              v-for="spec_val in spec.valueList"
              :key="spec_val.spec_value_id"
              :class="['spec-val-btn', spec_val.selected && 'selected', spec.spec_type === 1 && 'spec-image']"
              @click="handleClickSpec(spec, specIndex, spec_val)"
              type="button"
            >
              <img v-if="spec.spec_type === 1" :src="spec_val['spec_value_img'].thumbnail">
              <span class="spec-text">{{ spec_val.spec_value }}</span>
              <i class="iconfont ea-icon-right-bottom-checked"></i>
            </button>
          </template>
        </div>
      </div>
      <div v-if="unselectedSku" class="pro-list error-msg">
        <div class="pro-title"></div>
        <div class="pro-content">请选择商品规格！</div>
      </div>
    </div>
    <div v-if="goods.is_auth === 0 || goods.is_auth === 2" class="no-auth">
      此商品正在审核中，先看看其它商品吧。
    </div>
    <div v-else-if="snapshot" class="snapshot-box">
      当前页面内容为订单快照，展示的是创建时的商品信息，当发生交易争议时，此页面作为判断依据。
      <router-link :to="'/goods/' + goods.goods_id">点此查看最新商品详情</router-link>
    </div>
    <template v-else>
      <div class="pro-list buy-num">
        <div class="pro-title">购买数量</div>
        <div class="pro-content">
          <div class="count-num">
            <a href="javascript:" @click="handleBuyNumChanged('-')" class="oper-num down" :class="[buyNum < 2 && 'not-oper']"></a>
            <span class="num">
            <input type="number" v-model.number="buyNum">
          </span>
            <a href="javascript:" @click="handleBuyNumChanged('+')" class="oper-num up"></a>
          </div>
          <span style="margin-left: 15px">仅剩 {{ selectedSku.enable_quantity }} 件，抓紧时间购买哦！</span>
        </div>
      </div>
      <div class="buy-btns">
        <button
          type="button"
          class="buy-btn buy"
          :class="[!in_store && 'disabled']"
          @click="handleBuyNow"
        >立即购买</button>
        <button
          type="button"
          class="buy-btn add"
          :class="[!in_store && 'disabled']"
          @click="handleAddToCart"
        ><i class="iconfont ea-icon-cart"></i>加入购物车</button>
      </div>
    </template>
  </div>
</template>

<script>
/**
 * 商品信息模块
 * 包括商品名称、商品价格、购买数量、加入购物车
 * 包括优惠券
 * 包括促销信息
 * 包括限时抢购
 * 包括团购活动
 */
import Vue from 'vue'
import { RegExp } from '~/ui-utils'
import * as API_Goods from '@/api/goods'
import * as API_Trade from '@/api/trade'
import * as API_Promotions from '@/api/promotions'
import Storage from '@/utils/storage'
import GoodsCoupons from './-goods-coupons'
import GoodsPromotions from './-goods-promotions'
import GoodsGroupbuySeckill from './-goods-groupbuy-seckill'
import GoodsExchange from './-goods-exchange'
import GoodsPromBar from './-goods-prom-bar'
import GoodsShip from './-goods-ship'

Vue.component('goods-prom-bar', GoodsPromBar)
export default {
  name: 'goods-info',
  props: ['goods', 'orderprice', 'snapshot'],
  components: { GoodsCoupons, GoodsPromotions, GoodsGroupbuySeckill, GoodsExchange, GoodsShip },
  data() {
    return {
      goodsInfo: JSON.parse(JSON.stringify(this.goods)),
      // 购买数量
      buyNum: 1,
      // skuMap
      skuMap: new Map(),
      // 规格列表
      specList: [],
      // 被选中规格
      selectedSpec: [],
      // 被选中sku
      selectedSku: '',
      // 没有选中sku，初始化为false
      unselectedSku: false,
      // 有规格的商品价格区间
      priceRange: '',
      // 配送地区是否为有货状态
      in_store: true,
      // 是否显示原价格
      originPriceShow: true,
      // 促销信息
      promotions: '',
      // 总库存
      enable_quantity: 0,
      // 活动id
      activity_id: '',
      // 活动类型
      promotion_type: ''

    }
  },
  watch: {
    goods(newVal) {
      this.goodsInfo = JSON.parse(JSON.stringify(newVal))
    },
    selectedSku(newVal) {
      if (this.$route.query.sku_id && this.$route.query.sku_id !== String(newVal.sku_id)) {
        this.$router.replace({ path: `/goods/${newVal.goods_id}`, query: { sku_id: newVal.sku_id } })
      }
    }
  },
  async mounted() {
    if (this.snapshot) {
      this.specList = this.goods['spec_list']
    } else {
      const { goods_id } = this.goods
      const skus = await API_Goods.getGoodsSkus(goods_id)
      const promotions = await API_Promotions.getGoodsPromotions(goods_id)
      const specList = []
      const priceList = []
      skus.forEach((sku, skuIndex) => {
        const { spec_list, price } = sku
        priceList.push(price)
        const spec_value_ids = []
        if (spec_list) {
          spec_list.forEach((spec, specIndex) => {
            const _specIndex = specList.findIndex(_spec => _spec['spec_id'] === spec.spec_id)
            const _spec = {
              spec_id: spec.spec_id,
              spec_name: spec.spec_name,
              spec_type: spec.spec_type
            }
            const _value = {
              spec_value: spec.spec_value,
              spec_value_id: spec.spec_value_id,
              spec_value_img: {
                original: spec.spec_image,
                thumbnail: spec.thumbnail
              }
            }
            spec_value_ids.push(spec.spec_value_id)
            if (_specIndex === -1) {
              specList.push({ ..._spec, valueList: [{ ..._value }] })
            } else if (specList[_specIndex]['valueList'].findIndex(_value => _value['spec_value_id'] === spec['spec_value_id']) === -1) {
              specList[_specIndex]['valueList'].push({ ..._value })
            }
          })
          this.skuMap.set(spec_value_ids.join('-'), sku)
        } else {
          this.skuMap.set('no_spec', sku)
        }
      })
      // 如果价格区间大于1个
      if (priceList.length > 1) {
        const min = Math.min(...priceList)
        const max = Math.max(...priceList)
        if (min === max) {
          this.priceRange = [max]
        } else {
          this.priceRange = [min, max]
        }
      }
      this.specList = specList
      // 如果没有规格，把商品第一个sku给已选择sku
      if (!specList.length) {
        this.selectedSku = this.skuMap.get('no_spec')
        this.goodsInfo = {
          ...this.goodsInfo,
          ...this.selectedSku
        }
      }
      this.promotions = promotions
      // 如果有sku信息，初始化已选规格
      if (this.$route.query.sku_id) {
        this.initSpec()
      } else if (this.specList) {
        // 默认选中第一个sku
        const _selectedSpecVals = []
        this.specList.forEach((spec, specIndex) => {
          if (Array.isArray(spec.valueList)) {
            spec.valueList.forEach((val, specValIndex) => {
              if (specValIndex === 0) {
                val.selected = true
                this.selectedSpec[specIndex] = val.spec_value_id
                _selectedSpecVals.push(val.spec_value_id)
              }
            })
          }
        })
        this.handleSelectedSku()
      }
      const _promotions = this.promotions.filter(key => key.sku_id === this.selectedSku.sku_id)
      // 如果是限时抢购或者团购促销活动不显示原价格
      if (_promotions) {
        if (this.promotions.some(key => key.sku_id === this.selectedSku.sku_id) && _promotions.some(key => key.promotion_type === 'GROUPBUY' || key.promotion_type === 'SECKILL')) {
          this.originPriceShow = false
        } else {
          this.originPriceShow = true
        }
      }
    }
  },
  methods: {
    /** 初始化规格 */
    initSpec() {
      let { sku_id } = this.$route.query
      let selectedSpecs = ''
      if (sku_id) {
        // sku_id = Number(sku_id);
        this.skuMap.forEach((value, key) => {
          if (String(value.sku_id) === sku_id) {
            selectedSpecs = key.split('-')
          }
        })
      }
      const _selectedSpecVals = []
      this.specList.forEach((spec, specIndex) => {
        if (Array.isArray(spec.valueList)) {
          spec.valueList.forEach((val, specValIndex) => {
            if (selectedSpecs) {
              const spec_value_id = val.spec_value_id
              if (selectedSpecs.indexOf(String(spec_value_id)) !== -1) {
                val.selected = true
                this.selectedSpec[specIndex] = val.spec_value_id
                _selectedSpecVals.push(val.spec_value_id)
              }
            } else if (specValIndex === 0) {
              val.selected = true
              this.selectedSpec[specIndex] = val.spec_value_id
              _selectedSpecVals.push(val.spec_value_id)
            }
          })
        }
      })
      this.handleSelectedSku()
    },
    /** 选择规格 */
    handleClickSpec(spec, specIndex, spec_val) {
      if (spec.spec_type === 1) {
        this.$emit('spec-img-change', JSON.parse(JSON.stringify(spec_val.spec_value_img)))
      }
      if (spec_val.selected) return
      spec.valueList.map(item => {
        item.selected = item.spec_value_id === spec_val.spec_value_id
        return item
      })
      this.$set(this.specList, specIndex, spec)
      this.selectedSpec[specIndex] = spec_val.spec_value_id
      this.handleSelectedSku(true)
    },
    /** 购买数量增加减少 */
    handleBuyNumChanged(symbol) {
      if (symbol === '+') {
        const { enable_quantity } = this.selectedSku
        if (enable_quantity === 0) {
          this.$message.error('该规格暂时缺货！')
        } else if (this.buyNum >= enable_quantity) {
          this.$message.error('超过最大库存！')
        } else {
          this.buyNum += 1
        }
      } else {
        if (this.buyNum < 2) {
          this.$message.error('不能再少啦！')
        } else {
          this.buyNum -= 1
        }
      }
    },
    /** 根据已选规格选出对应的sku */
    handleSelectedSku(falg) {
      let sku
      if (this.selectedSpec.length) {
        const spec_vals = []
        this.selectedSpec.forEach(item => spec_vals.push(item))
        sku = this.skuMap.get(spec_vals.join('-'))
      } else {
        sku = this.skuMap.get('no_spec')
      }
      if (sku) {
        this.selectedSku = sku
        this.unselectedSku = false
        this.priceRange = ''
        this.goodsInfo = { ...this.goodsInfo, ...sku }
        this.buyNum = sku.enable_quantity === 0 ? 0 : 1
        if (falg) {
          const _promotions = this.promotions.filter(key => key.sku_id === this.selectedSku.sku_id)
          if (_promotions) {
            if (this.promotions.some(key => key.sku_id === this.selectedSku.sku_id) && _promotions.some(key => key.promotion_type === 'GROUPBUY' || key.promotion_type === 'SECKILL')) {
              this.originPriceShow = false
            } else {
              this.originPriceShow = true
            }
          }
        }
      }
    },
    /** 立即购买 */
    handleBuyNow() {
      if (!this.in_store || !this.isLogin()) return
      this.getActivityId()
      const { buyNum, activity_id, promotion_type } = this
      if (!this.handleCheckNum()) return
      const { sku_id } = this.selectedSku
      API_Trade.buyNow(sku_id, buyNum, activity_id, promotion_type).then(response => {
        this.$store.dispatch('cart/getCartDataAction')
        this.$router.push({ path: '/checkout', query: { way: 'BUY_NOW' } })
      })
    },
    /** 加入购物车 */
    handleAddToCart() {
      if (!this.in_store || !this.isLogin()) return
      this.getActivityId()
      const { buyNum, activity_id, promotion_type } = this
      if (!this.handleCheckNum()) return
      const { sku_id } = this.selectedSku
      API_Trade.addToCart(sku_id, buyNum, activity_id, promotion_type).then(response => {
        this.$store.dispatch('cart/getCartDataAction')
        this.$confirm('加入购物车成功！要去看看吗？', () => {
          this.$router.push({ path: '/cart' })
        })
      })
    },
    /** 是否已登录 */
    isLogin() {
      if (!this.selectedSku) {
        this.$message.error('请选择商品规格！')
        this.unselectedSku = true
        return false
      }
      if (!Storage.getItem('refresh_token')) {
        this.$confirm('您还未登录，要现在去登录吗？', () => {
          this.$router.push({ path: `/login?forward=${this.$route.path}?sku_id=${this.selectedSku.sku_id}` })
        })
        return false
      } else {
        return true
      }
    },
    /** 检查是否有积分兑换、团购、限时抢购活动 */
    getActivityId() {
      const { promotions } = this
      if (!promotions || !promotions.length) return ''
      // 把团购跟限时抢购 排序放在数组前边 先循环
      promotions.map((item, index) => {
        if (item.promotion_type === 'GROUPBUY' || item.promotion_type === 'SECKILL') {
          promotions.unshift(promotions.splice(index, 1)[0])
        }
      })
      let pro
      for (let i = 0; i < promotions.length; i++) {
        let item = promotions[i]
        if (item.promotion_type === 'SECKILL' || item.promotion_type === 'GROUPBUY' || item.promotion_type === 'EXCHANGE' || item.promotion_type === 'MINUS' || item.promotion_type === 'HALF_PRICE') {
          // 积分兑换没有sku_id 所以直接判断   并且 如果单品立减与第二件半价 是全商品参与也没有sku_id
          if (item.promotion_type === 'EXCHANGE' || item.goods_id === '-1') {
            pro = item
            break
          }
          if (this.selectedSku.sku_id === item.sku_id) {
            pro = item
            break
          }
        }
      }
      if (!pro) return ''
      this.activity_id = pro.activity_id
      this.promotion_type = pro.promotion_type
    },
    /** 检查购买数量有效性 */
    handleCheckNum() {
      let { buyNum } = this
      if (!RegExp.integer.test(buyNum) || buyNum < 1) {
        this.$message.error('商品库存已不足，不能购买！')
        return false
      }
      return true
    },
    /** 配送地区是否有货发生改变 */
    handleInStockChange(in_store) {
      this.in_store = in_store
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/color";
.spec-text {
  word-break: break-word;
}
.pro-name, .pro-details {
  background: url(../../assets/images/icons-goods.png) repeat-x 0 bottom;
  padding-bottom: 15px;
}
.goods-info {
  padding-left: 20px;
  padding-right: 20px;
  .pro-name {
    h1 {
      font: normal 16px/24px "microsoft yahei";
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      padding-left: 10px;
      word-break: break-all;
      width: 520px;
    }
  }
  .pro-details {
    padding: 10px 0;
    color: #666666;
    position: relative;
  }
  .buy-num {
    padding-top: 5px;
    .pro-content {
      display: flex
    }
  }
  .count-num {
    display: flex;
    align-items: center;
  }
  .num {
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    height: 19px;
    padding-top: 1px;
    background: #fff;
    display: block;
    input {
      border: 0 none;
      display: block;
      width: 34px;
      height: 18px;
      line-height: 18px;
      text-align: center;
    }
  }
  .oper-num {
    display: block;
    align-items: center;
    background: url(../../assets/images/icons-goods.png) no-repeat;
    width: 21px;
    height: 22px;
    &.down {
      background-position: right -69px;
    }
    &.up {
      background-position: right -47px;
    }
    &:hover {
      background-position-x: -178px
    }
    &.not-oper {
      cursor: not-allowed
    }
  }
  .buy-btns {
    display: flex;
    .buy-btn {
      display: block;
      width: 160px;
      height: 45px;
      border: 2px solid $color-theme;
      background-color: $color-theme;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      margin-right: 20px;
      &.disabled {
        background-color: #ccc;
        border-color: #ccc;
        color: #ffffff;
        cursor: not-allowed;
      }
    }
    .buy:not(.disabled):hover {
      background-color: darken($color-theme, 10%);
    }
    .add {
      color: $color-theme;
      background-color: #fff;
      .ea-icon-cart {
        font-size: 20px;
        margin-right: 10px;
      }
      &:not(.disabled):hover {
        color: darken($color-theme, 10%);
        border-color: darken($color-theme, 10%);
      }
    }
  }
}
/deep/ {
  .pro-list {
    display: flex;
    margin-bottom: 5px;
    padding-left: 10px;
  }
  .pro-title {
    width: 60px;
    padding-right: 17px;
    height: 33px;
    line-height: 33px;
  }
  .pro-title1 {
    height: auto;
    line-height: 25px;
  }
  .pro-content {
    width: 307px;
    min-height: 33px;
    line-height: 33px;
    &.price {
      span {
        font-size: 16px
      }
      strong {
        font-size: 22px
      }
    }
  }
}
.pro-spec {
  position: relative;
  margin-top: 10px;
  &.error {
    &:before {
      position: absolute;
      content: '';
      width: 104%;
      height: 104%;
      border: 2px solid red;
      margin-left: -2%;
      margin-top: -2%;
    }
    .error-msg {
      color: red
    }
  }
}
.spec-val-btn {
  position: relative;
  border: 2px solid #e2e1e3;
  color: black;
  padding: 10px 15px;
  margin: 0 5px 5px 0;
  cursor: pointer;
  background-color: #fff;
  &.selected {
    border-color: $color-main;
    .ea-icon-right-bottom-checked {
      display: block
    }
  }
  &.spec-image {
    float: left;
    padding: 2px 5px;
    margin-bottom: 5px;
    background-color: #F7F7F7;
    img {
      width: 40px;
      height: 40px;
      vertical-align: middle;
    }
    .spec-text {
      line-height: 50px;
      display: inline-block;
      margin-left: 5px;
      color: #666
    }
  }
  .ea-icon-right-bottom-checked {
    display: none;
    position: absolute;
    right: 0;
    bottom: -1px;
    color: $color-main;
    font-size: 18px;
  }
}
.price-box {
  position: relative;
  background-color: #f3f3f3;
}
.no-auth {
  width: 100%;
  line-height: 20px;
  background-color: #FFF7D1;
  margin: 10px auto;
  text-align: left;
  border: solid 1px #E5DEBC;
  color: #666;
  padding: 10px;
  box-sizing: border-box;
}
.snapshot-box {
  margin-top: 10px;
  padding: 10px;
  background-color: #eaeaea;
  a {
    color: $color-href;
    &:hover {
      color: $color-main
    }
  }
}
</style>
